<!--
 * @description: 
 * @Author: Islands
 * @Date: 2023-12-08 11:33:03
 * @LastEditTime: 2024-03-26 11:12:48
-->
<script lang='ts' setup>
import { ref, reactive } from 'vue';
type IShape = "circle" | "square";
type IPlacement = "right" | "bottom";
defineProps({
    url: {
        type: String,
        required: false,
        default: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    },
    name: {
        type: String,
        required: true,
        default: '游客'
    },
    shape: {
        default: 'square' as IShape
    },
    size: {
        type: Number,
        default: 40,
    },
    placement: {
        default: 'right' as IPlacement
    }
});

const error = (_e: any) => {
    console.log("图片加载失败触发事件！");
}
</script>
<template>
    <div class="pointer" :class="placement">
        <el-avatar :size="size" :shape="shape" :src="url" :error="error" />
        <h1 class="userName">{{ name }}</h1>
    </div>
</template>
<style lang='scss'  scoped>
.pointer {
    cursor: pointer;
}

.right {
    display: flex;
    align-items: center;

    .userName {
        margin-left: 10px;
        font-weight: bold;
        font-size: 14px;
        min-width: 40px;
        max-width: 100px;
    }
}

.bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

    .userName {
        max-width: 100px;
        margin-top: 5px;
        
    }
}
</style>